<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="6" :md="10" :xs="24" :sm="10">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <img v-if="logo" :src="logo" alt="用户头像" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <span><svg-icon icon-class="user" />用户名称</span>
                <div class="pull-right">{{ user.user_name }}</div>
              </li>
              <li class="list-group-item">
                <span><svg-icon icon-class="phone" />账号</span>
                <div class="pull-right">{{ user.email }}</div>
              </li>

              <li class="list-group-item">
                <span><svg-icon icon-class="peoples" />所属角色</span>
                <div class="pull-right" v-if="user.roles">
                  {{ user.roles?.map((role) => role).join(",") }}
                </div>
              </li>
              <li class="list-group-item">
                <span><svg-icon icon-class="date" />创建日期</span>
                <div class="pull-right">{{ user.createdAt }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="18" :md="14" :xs="24" :sm="14">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import resetPwd from "./resetPwd.vue";
import { useUserStore } from "@/stores/modules/user";
const user = ref({});
const activeTab = ref("resetPwd");
const userStore = useUserStore();
user.value = userStore.user;
console.log(user.value);
</script>

<style scoped lang="scss">
.app-container {
  .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;

    span {
      display: flex;
      align-items: center;
      min-width: 100px;
    }

    .svg-icon {
      margin-right: 5px;
    }

    .pull-right {
      margin-left: auto;
    }
  }

  .text-center {
    text-align: center;

    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
